// ** React Imports
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const LeftTwo = () => {
  const charRef = useRef(null)

  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(charRef.current)
    chart.setOption({
      color: ['#37A2DA', '#32C5E9', '#67E0E3'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          show: true,
        },
      },
      aria: {
        enabled: true,
      },
      xAxis: {
        type: 'category',
        data: [
          ' 一号线',
          '二号线',
          '三号线',
          '四号线',
          '五号线',
          '六号线',
          '七号线',
        ],
        axisLine: { lineStyle: { color: '#95f3f5' } },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'transparent', //设置轴线颜色为透明
          },
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: '40%',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#67E0E3',
              fontSize: 14,
              fontWeight: 'bold',
            },
          },
        },
      ],
    })
  }
  return (
    <div className="left-two">
      <div className="box-title">每日产出数量统计</div>
      <div className="box-content left-two-content">
        <div
          className="char"
          ref={charRef}
          style={{ height: '100%', width: '100%' }}
        ></div>
      </div>
    </div>
  )
}

export default LeftTwo
